<template>
    <div class="coupon">
        <!-- 顶部搜索部分 -->
        <div class="search_box">
            <el-row>
                <!-- 左边标题 -->
                <el-col :span="21" class="left_search">
                    <el-icon :size="20" color="#444545">
                        <Search />
                    </el-icon>
                    <span>筛选搜索</span>
                </el-col>
                <!-- 右边按钮 -->
                <el-col :span="3" class="right_search">
                    <el-button @click="resetFn">重置</el-button>
                    <el-button type="primary" @click="fetch">查询搜索</el-button>
                </el-col>
            </el-row>
            <div class="coupon_input">
                <el-col class="input_search">
                    <span>优惠券名称：</span>
                    <el-input autocomplete="false" placeholder="优惠券名称" v-model="searchParams.name" @keyup.enter="fetch" />
                    <span>优惠券类型：</span>
                    <el-select placeholder="全部" v-model="searchParams.type">
                        <el-option v-for="item in typeOptions" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                        <!-- <el-option label="全场赠券" value="0"></el-option>
                            <el-option label="会员赠券" value="1"></el-option>
                            <el-option label="购物赠券" value="2"></el-option>
                            <el-option label="注册赠券" value="3"></el-option> -->
                    </el-select>
                </el-col>
            </div>
        </div>
        <!-- 添加 -->
        <div class="oprations_box">

            <div class="left_search">
                <el-icon :size="20" color="#444545">
                    <Tickets />
                </el-icon>
                <span>数据列表</span>
            </div>
            <div class="right_btn">

                <!-- <el-button @click="showFromDialogFn"> -->
                <el-button @click="router.push('/sms/addCoupon')">
                    添加
                </el-button>

            </div>
            <!-- </el-row> -->
        </div>
        <!-- table列表 -->
        <div class="table_box">
            <el-table border :data="list" style="width: 100%" :cell-style="{ textAlign: 'center' }"
                :header-cell-style="{ 'text-align': 'center' }">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="id" label="编号" width="70" />
                <el-table-column prop="name" label="优惠券名称" />
                <el-table-column prop="type" label="优惠券类型" :formatter='formatterType'>
                    <!-- {{ formatterType }} -->
                </el-table-column>
                <el-table-column prop="useType" label="可使用商品" :formatter="formatterUseType" />
                <el-table-column prop="minPoint" label="使用门槛">
                    <template #default="{ row }">
                        <p>满{{ row.minPoint }}元可用</p>
                    </template>
                </el-table-column>
                <el-table-column prop="amount" label="面值">
                    <template #default="{ row }">
                        <p>{{ row.amount }}元</p>
                    </template>
                </el-table-column>
                <el-table-column prop="platform" label="适用平台" :formatter="formatterPlatform" />
                <el-table-column prop="enableTime endTime" label="有效期" width="180">
                    <template #default="{ row }">
                        {{ formateTime(row.enableTime) }}至{{ formateTime(row.endTime) }}
                    </template>
                </el-table-column>
                <el-table-column prop="memberLevel" label="状态">
                    <template #default="{ row }">
                        <p>{{ row.memberLevel === null ? '已过期' : '未过期' }}</p>
                    </template>
                </el-table-column>
                <el-table-column class="handle" prop="" label="操作" width="200">
                    <template #default="{ row }">
                        <el-button type="primary" link size="small"
                            @click=" router.push(`/sms/couponHistory?id=${row.id}`)">查看</el-button>
                        <el-button type="primary" link size="small"
                            @click=" router.push(`updateCoupon?id=${row.id}`)">编辑</el-button>

                        <el-button type="primary" link size="small" @click="deleteFn(row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页 -->
        <PaginationTwo v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[10, 20, 50, 100]"
            :total="total" />
    </div>
</template>
<script setup lang='ts'>
import { debounce, formateTime } from '@/utils/index'
import { Search, Tickets } from '@element-plus/icons-vue'
import PaginationTwo from '@/components/Pagination/PaginationTwo.vue'
import { ApiGetCouponList, ApiDeleteCouponId } from "@/http/api"
import { ref, reactive, computed } from "vue"
import { useRouter } from "vue-router"
import useTable from '@/hooks/useTable'
// @ts-ignore
import { ElMessage, ElMessageBox } from 'element-plus'

// 搜索
const searchParams = reactive({
    name: '',
    type: ''
})
const { list, pageNum, pageSize, total, fetch } = useTable(ApiGetCouponList, searchParams)

// 搜索下拉框
const typeOptions = [
    {
        value: 0,
        label: '全场赠券',
    },
    {
        value: 1,
        label: '会员赠券',
    },
    {
        value: 2,
        label: '购物赠券',
    },
    {
        value: 3,
        label: '注册赠券',
    },
]
// 优惠券类型
const formatterType = (row: any) => {
    if (row.type === 0) {
        return "全场赠券"
    } else if (row.type === 1) {
        return "会员赠券"
    } else if (row.type === 2) {
        return "购物赠券"
    } else if (row.type === 3) {
        return "注册赠券"
    }
}


// 查询搜索
// const debounceFetch = debounce(fetch, 500


// 可使用商品
const formatterUseType = (row: any) => {
    if (row.useType == 0) {
        return "全场通用"
    } else if (row.useType == 1) {
        return "指定分类"
    } else if (row.useType == 2) {
        return "指定商品"
    }
}
// 适用平台
const formatterPlatform = (row: any) => {
    if (row.platform == 0) {
        return "全平台"
    } else if (row.platform == 1) {
        return "移动平台"
    } else if (row.platform == 2) {
        return "PC平台"
    }
}

// 删除
const deleteFn = (id: number) => {
    ElMessageBox.confirm("是否进行删除操作？", "提示", {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(() => {
        ApiDeleteCouponId(id).then(res => {
            if (res.code === 200) {
                // 提示
                ElMessage({
                    type: 'success',
                    message: '删除成功'
                })
                // 重新刷新页面
                fetch();
            }
        })
    }).catch(() => { })
}
// 重置
const resetFn = () => {
    searchParams.name = '';
    searchParams.type = '';
    fetch();
}
// 跳转查看页面
let router = useRouter()

</script>
<style lang="less" scoped>
// 顶部搜索部分
.search_box {
    padding: 20px;
    box-shadow: 0 0 4px 2px #eee;
    margin-bottom: 20px;
    border-radius: 2px;
    // 将搜索框部分粘性定位到顶部
    position: sticky;
    top: -20px;
    z-index: 2;
    background-color: rgba(255, 255, 255, 0.9);

    // 右边按钮
    .right_search {
        display: flex;
        align-items: center;
        justify-content: right;
    }
}

.input_search {
    display: flex;
    align-items: center;
    justify-content: left;

    .input_search_item {
        margin-top: 14px;
    }

    span {
        font-size: 14px;
        color: #606266;
        margin-left: 30px;
    }

    .el-input {
        width: 200px;
    }
}

// 数据列表
.oprations_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    box-shadow: 0 0 4px 2px #eee;
    margin-bottom: 20px;
    border-radius: 2px;
}

.search {
    display: flex;
    justify-content: start;
    align-items: center;
    margin-bottom: 20px;

    span {
        width: 100px;
        margin-left: 10px;
    }

    .el-input {
        width: auto;
    }

}
</style>